<template>
	<view v-if="isShow" class="alert-back">
		<view class="login-content">
			<image class="login-icon" src="/static/images/login_icon.png"></image>
			<image @click="close" class="login-close" src="/static/images/login_close.png"></image>
			<view class="title f-30">需要授权登录</view>
			<view class="tip">该功能需要授权登录才可使用，您需要现在授权登录吗</view>
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权登录</button>    
		</view>
	</view>
</template>
<script>
	import { phoneLogin } from '@/static/js/utils.js'
 	export default {
		name : "loginAlert",
		data() {
			return {
			}
		},
		props: {
			isShow : {
				type: Boolean,
				default: false
			}
		},
		onReady() {
		},
		methods: {
			close() {
				this.$emit('closeLogin')
			},
			getPhoneNumber: function(e) {
				let that = this
				phoneLogin(e, function(res) {
					that.$emit('loginSuccess', res)
				}, function(){})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.alert-back{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		background-color: rgba(0,0,0, .5);
	}
	.login-content {
		position: absolute;
		width: 568rpx;
		background-color: #FFFFFF;
		left: 50%;
		margin-left: -284rpx;
		top: 20%;
		z-index: 9;
		padding: 76rpx 60rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		text-align: center;
		.login-icon {
			width: 182rpx;
			height: 123rpx;
			margin: 0 auto 45rpx auto;
		}
		.title {
			font-weight: bold;
		}
		.tip {
			margin-top: 16rpx;
			color: #666666;
		}
		button {
			width: 365rpx;
			height: 80rpx;
			margin-top: 68rpx;
			background: #0579FE;
			box-shadow: 0px 6rpx 16rpx 0rpx rgba(5, 121, 254, 0.4);
			border-radius: 47rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			font-size: 32rpx;
		}
		.login-close {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			right: 16rpx;
			top: 16rpx;
			z-index: 9;
		}
	}
	
</style>
